Skip to content

feat(BBBSearch): add search component#39

Open
AtilaU19 wants to merge 1 commit into
bigbluebutton:developfrom
AtilaU19:task-35
Open

feat(BBBSearch): add search component#39
AtilaU19 wants to merge 1 commit into
bigbluebutton:developfrom
AtilaU19:task-35

Conversation

@AtilaU19

Copy link
Copy Markdown

What does this PR do?

Implements the BBBSearch component.

Features:

  • Built-in debounce (configurable, defaults to 500ms)
  • Clear button that bypasses debounce for immediate feedback
  • Loading spinner via isLoading prop (mutually exclusive with clear button)
  • Supports both uncontrolled (default) and controlled modes
  • Uses type="search" for improved browser and accessibility semantics
  • Accessible: aria-label, role="searchbox", keyboard-friendly clear button
  • Styled with library design tokens (palette, sizing, typography)

Notes
BBBSearch is intentionally kept free of any GraphQL/Apollo dependency. Loading state is passed in via isLoading, allowing the caller to derive it from a subscription, a query, or any other async source. This keeps the component reusable outside the BBB core.

Closes Issue(s)

Closes #35

@AtilaU19 AtilaU19 changed the base branch from main to develop June 10, 2026 15:19
Comment thread src/components/Search/component.tsx Outdated
/**
* A search input component with built-in debounce, clear button, and loading state.
*
* Supports both **uncontrolled** (default) and **controlled** modes:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove the JSDoc comments from L9-L23. The README documentation is sufficient, and having them here causes the text to appear in the BBBSearch story in Storybook, polluting the UI when there is too much content - see screenshot below. The expected pattern is just 1 to 3 sentences giving a brief, high-level description of the component - see other components.

Image

);
};

/** Controlled mode — parent manages the value. */

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The controlled mode example displays 2 clear buttons:

Image

@@ -0,0 +1,73 @@
# BBBSearch

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a mention to this component in the project README - under available components.

@AtilaU19 AtilaU19 changed the title feat(Search): add BBBSearch component feat(BBBSearch): add search component Jun 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add BBBSearch component — follow-up to BBBInput

2 participants